<template>
  <div>
    <el-dialog :title='option.title' :visible.sync='isShow' @close="closeUser" width="890px" @open="openCreate"
      :close-on-click-modal="false" center>
      <div v-loading="loading">
        <div class="content">
          <el-card>
            <el-form size="mini" ref="form" :model="form" :rules="rules" label-width="140px" label-position="left">
              <el-row :gutter="10">
                <el-col :span="12" v-show="showID">
                  <el-form-item prop="TEAMID" label="班组ID" v-show="showID">
                    <el-input v-model="form.TEAMID" placeholder="请输入组号" :disabled="option.isChecked" v-show="showID">
                    </el-input>
                  </el-form-item>
                </el-col>
                <!-- <el-col :span="12">
                   <el-form-item prop="TEAMLEVEL" label="级别">
                     <el-input v-model="form.TEAMLEVEL" placeholder="请输入级别" :disabled="option.isChecked"></el-input>
                   </el-form-item>
               </el-col> -->
                <el-col :span="12">
                  <el-form-item prop="TEAMNAME" :label="option.name">
                    <el-input v-model="form.TEAMNAME" placeholder="请输入名称"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="TEAMTYPE" label="类型">
                    <el-select v-model="form.TEAMTYPE" filterable placeholder="请选择类型" :disabled="option.isChecked">
                      <el-option v-for="item in TEAMTYPELIST" :key="item.value" :label="item.name" :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label='班' class='typeInfo-el-form-item' prop='HTEAMID' v-show="showHigh">
                    <el-select v-model="form.HTEAMID" filterable placeholder="请选择班" v-show="showHigh">
                      <el-option v-for="item in STeamTypeList" :key="item.index" :label="item.TEAMID+'-'+item.TEAMNAME"
                        :value="item.TEAMID">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label='备注1'  prop='REMARK1'>
                    <el-input v-model="form.REMARK1" placeholder="请输入备注1"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label='备注2'  prop='REMARK2'>
                    <el-input v-model="form.REMARK2" placeholder="请输入备注2"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-card>
          <div style="text-align:center;margin-top:20px">
            <el-button size="mini" @click='isShow=false'>取消</el-button>
            <el-button type="primary" size="mini" @click="add()">确认</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import requestYg from "@/common/utils/requestYg";
  import teamManage from "@/message/seat-manage/setaTeam/teamManage";
  export default {
    name: "",
    data() {
      return {
        TEAMTYPELIST: [{
            name: "2-组",
            value: "2"
          },
          {
            name: "1-班",
            value: "1"
          },
        ],
        "TEAMTYPE": {
          "2": "2-组",
          "1": "1-班"
        },
        STeamTypeList: [],
        loading: false,
        showHigh: true,
        showID: false,
        form: {
          TEAMID: "",
          TEAMNAME: "",
          TEAMTYPE: "",
          HTEAMID: "",
          REMARK1: '',
          REMARK2: '',
        },

        rules: {
          TEAMNAME: [{
            required: true,
            message: "名称必填！",
            trigger: "blur"
          }],
          // HTEAMID: [
          //   { required: true, message: "上级班组号必填！", trigger: "blur" }
          // ]
        }
      };
    },
    props: {
      //父元素传递的数据
      option: Object
    },
    components: {},
    computed: {
      isShow: {
        //创建用户弹窗是否显示
        get: function () {
          return this.option.isShow;
        },
        set: function (newValue) {
          this.option.isShow = newValue;
        }
      }
    },
    watch: {},
    methods: {
      dataFormat(row, column) {
        if (column.property == "TEAMTYPE")
          return this.TEAMTYPE[row[column.property]];
      },
      // 查询上级班组
      squery() {
        this.loading = true;
        let resBody = new teamManage();
        resBody.data.OPERATION = "4";
        resBody.data.TEAMTYPE = "1";
        requestYg(resBody)
          .then(response => {
            if (response.SYS_HEAD.ReturnCode === "000000") {
              this.STeamTypeList = response.RSP_BODY.struct;
              // console.log(this.STeamTypeList)
              for (let i = 0; i < this.STeamTypeList.length; i++) {
                const element = this.STeamTypeList[i];
                this.STeamTypeMap[element.TEAMID] = element.TEAMNAME;
              }
            } else {
              this.$message({
                type: "error",
                message: "请求失败，错误码: " +
                  response.SYS_HEAD.ReturnCode +
                  ",错误信息: " +
                  response.SYS_HEAD.ReturnMessage
              });
              this.STeamTypeList = [];
            }

            this.loading = false;
          })
          .catch(error => {
            this.loading = false;
          })

      },
      add() {
        //添加
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.loading = true;
            let resBody = new teamManage()
            resBody.data.OPERATION = this.option.log == "1" ? '1' : '2';
            resBody.data.TEAMID = this.form.TEAMID;
            resBody.data.TEAMNAME = this.form.TEAMNAME;
            resBody.data.TEAMTYPE = this.form.TEAMTYPE;
            resBody.data.REMARK2 = this.form.REMARK2;
            resBody.data.REMARK1 = this.form.REMARK1;
            resBody.data.HTEAMID = (this.form.TEAMTYPE == "2") ? this.form.HTEAMID : "";
            requestYg(resBody)
              .then(response => {
                if (response.SYS_HEAD.ReturnCode === "000000") {
                  let mes = this.option.log == "1" ? "创建" : "修改";
                  this.$message({
                    type: "success",
                    message: `坐席组信息${mes}${response.SYS_HEAD.ReturnMessage}!`
                  });
                  this.isShow = false;
                  this.$emit("refreshTable");
                } else {
                  this.$message({
                    type: "error",
                    message: `${response.SYS_HEAD.ReturnMessage}!`
                  });
                }
                this.loading = false;
              })
              .catch(error => {
                this.loading = false;
              });
          } else {
            this.$message({
              type: "warning",
              message: "请输入合法的数据！"
            });
            return false;
          }
        });
      },
      openCreate() {
         this.squery();
        //打开弹窗事件
        // this.loadSysList();
        this.$nextTick(function () {
          if (this.option.log == "2") {
            this.updateDate();

          } else {
            this.showID = false;
            this.form.TEAMNAME = "";
            this.form.HTEAMID = "";
          }
          if (this.option.val == 1) {
            this.showHigh = true;
            // this.form.TEAMLEVEL="2";
            this.form.TEAMTYPE = "2";
          } else if (this.option.val == 2) {
            // this.form.TEAMLEVEL="1";
            this.form.TEAMTYPE = "1";
            // this.form.HTEAMID="00000"
            this.showHigh = false;
          }
        })
      },
      updateDate() {
        this.showID = true;
        this.form.TEAMID = this.option.currentRow.TEAMID;
        // this.form.TEAMLEVEL = this.option.currentRow.TEAMLEVEL;
        this.form.TEAMNAME = this.option.currentRow.TEAMNAME;
        this.form.TEAMTYPE = this.option.currentRow.TEAMTYPE;
        this.form.HTEAMID = this.option.currentRow.HTEAMID;
        this.form.REMARK1 = this.option.currentRow.REMARK1;
        this.form.REMARK2 = this.option.currentRow.REMARK2;
        this.showHigh = (this.option.currentRow.TEAMTYPE == "2") ? true : false;
        // console.log(this.option.currentRow.TEAMTYPE);
        // console.log(this.showHigh)
        // console.log(this.form)
      },
      closeUser() {
        //关闭弹窗清楚表单数据并清楚表单验证
        // 重置表单数据
        this.$refs.form.clearValidate(); //清楚表单验证
        this.$refs.form.resetFields();
        this.$emit("refreshTable");
      },

      // addType() { //关闭弹窗事件，清楚表单验证
      //   this.option.isShow = false;
      //   this.$refs.form.clearValidate();
      // },
    },
  };

</script>
<style lang="scss" scoped>
  .content {
    display: flex;
    flex-direction: column;
  }

  .require {
    color: red;
  }

  .dialog-text {
    display: inline-block;
    width: 100%;
    text-align: center;
    color: red;
    font-size: 18px;
  }

  .role {
    width: 95%;
    border: 1px solid #eee;
    border-radius: 4px;
    height: 290px;

    .roleHeader {
      color: #606266;
      font-weight: 500;
      font-size: 14px;
      background: #f5f7fa;
      height: 42px;
      box-sizing: border-box;
      padding: 9px;
      overflow-y: auto;
    }
  }

  .el-card {
    overflow: inherit;
  }

</style>
